<template>
	<view>
		<view class="cu-bar bg-white search fixed" style="padding-bottom: 10rpx;">
			<view class="search-form round">
				<input type="text" v-model="searchText" placeholder="输入搜索的关键词" @input="searchClick" ></input>
				<text class="basefont icon-serach"></text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" style="padding-top: 90rpx;height:1200rpx" >
			<view class="cu-list menu" >
				<view class="cu-item" v-for="(item,idx) in countyList" :key="idx" @tap="itemTap(item)">
					<view class="content" style="display: flex;align-items:center;justify-content: flex-start">
						<view class="iti-flag" :class="item.classname=='tw'?'cn':item.classname"></view>
						<text :class="item.classname==selectText?'text-blue':'text-black'" style="padding-left: 20rpx;">{{item.county}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import countyData from './country.json'
	export default {
		props: {
			value: {
				value: String,
				default: '',
			}
		},
		data() {
			return {
				CustomBar: this.$CustomBar,
				countyList:countyData,
				searchText:'',
				selectText:''
			}
		},
		onReady() {
			if(this.value){
				this.initData();
			}
		},
		
		methods: {
			initData(){
				if(this.value){
					const data = [...countyData]
					data.forEach((item, index, arr) => {
						if (item.classname==this.value) {
							this.$emit('countryChange', item);
							return
						}
					})
					this.selectText=this.value
				}else{
					this.selectText=''
				}
				
			},
			itemTap(item){
				this.selectText=item.classname
				this.$emit('countryChange', item);
			},
			searchClick(e){
				let list = []
				const value = e.detail.value
				let data = [...countyData]
				if(!value||value===''){
					this.countyList = data
					return
				}
				data.forEach((item) => {
				    if (item.county.indexOf(value)>=0) {
				        list.push(item)
				    }
				})
				if(list.length>0){
					this.countyList = list
				}else {
					this.countyList = data
				}
				
			},
			onClear(){
				this.selectText=''
			}
			
		}
	}
</script>

<style>
	@import url("./flog.css");
</style>
